<template>
	<view class="content">
		<tab-select :tab_link="tab_link" @change="link_change" :cindex="tab_index" :img_width="25"></tab-select>
		<scroll-view scroll-y="true" @scrolltolower="scrolltolower()">
			<view class="row">
				<view class="col-22 pdl-1 pdr-1 list" v-for="(item,index) in list" :key="index">
					<view class="row title" @click="navTo(item)">
						<view class="time">
							<text>{{item.orderTypeText}}</text>{{item.createTime}}
						</view>
						<view class="status">
							{{item.orderType == 1 ? item.orderStateText : item.orderStateInsideText}}
							<!-- {{coverStatus(item.orderStateInside)}} -->
						</view>
					</view>
					<view class="row content" @click="navTo(item)">
						<view class="col-3">
							<view class="row con_left">
								<view class="col-24 t_center scd">
									<image src="../../static/trip/scd@2x.png" mode="heightFix"></image>
								</view>
								<view class="col-24 t_center x2x">
									<image src="../../static/trip/x@2x.png" mode="heightFix"></image>
								</view>
								<view class="col-24 t_center xcd">
									<image src="../../static/trip/xcd@2x.png" mode="heightFix"></image>
								</view>
							</view>
						</view>
						<view class="col-21">
							<view class="row con_right">
								<view class="col-24">
									{{item.getOnPoint}}
								</view>
								<view class="col-24">
									{{item.getOffPoint}}
								</view>
							</view>
						</view>
					</view>
					<view class="row tab_cancel" 
					v-if="item.orderStateInside == 9 || 
					item.orderStateInside == 10">
						<view class="col-19"></view>
						<view class="col-5">
							<button type="primary" class="t_size_28" @click="navTo(item)">
								{{
									item.orderStateInside == 9 ? '去支付' : '去评价'
								}}
							</button>
						</view>
					</view>
				</view>
			</view>
			<view class="clear t_center t_size_28" v-if="list.length==0">
				<image src="../../static/public/zwnr.png" mode="heightFix"></image>
				<view>
					暂无行程，去下一单吧.
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import tab_select from '@/components/trip/tab_select.vue'
	export default {
		components:{
			"tab-select": tab_select
		},
		data(){
			return {
				tab_link: [{
					id: 0,
					name: '全部'
				},
				// {
				// 	id: 1,
				// 	name: '待评价'
				// },
				{
					id: 2,
					name: '已评价'
				}],
				tab_index: 0,
				objPage: {
					isEvaluate: 0,
					pageNum: 1,
					pageSize: 10
				},
				list: [],
				loading: true
			}
		},
		onShow() {
			this.objPage.pageNum = 1;
			this.list = [];
			this.loading = true;
			this.load()
		},
		methods:{
			async load(){
				if(!this.loading){
					return
				}
				uni.showLoading()
				 let res = await this.$api.request(this.$api.order.list,this.objPage);
				 this.list = this.list.concat(res.list);
				 if(res.list.length != this.objPage.pageSize){
					this.loading = false;
					uni.hideLoading();
				 }
			},
			link_change(e){
				this.tab_index = e;
				this.objPage.isEvaluate = this.tab_link[e].id;
				this.list = [];
				this.objPage.pageNum = 1;
				this.loading = true;
				this.load();
			},
			scrolltolower(){
				this.objPage.pageNum += 1;
				this.load();
			},
			navTo(item){
				if(item.orderType == 1){
					this.$public.navTo('trip/trip_detail?id='+item.orderId)
				}else{
					this.$public.navTo('index/status?orderId='+item.orderId + '&status=' + item.orderStateInside)
				}
			},
			coverStatus(type){
				let str = '';
				switch(type){
					case 1: 
						str = '用户已取消';
						break;
					case 2:
						str = '司机已取消';
						break;
					case 3:
						str = '派单中';
						break;
					case 4:
						str = '已分配车辆';
						break;
					case 5:
						str = '司机正在前往';
						break;
					case 6:
						str = '司机已到达';
						break;
					case 7:
						str = '乘客已上车';
						break;
					case 8:
						str = '正在送达乘客';
						break;
					case 9:
						str = '已确认送达';
						break;
					case 10:
						str = '支付完成(待评价)';
						break;
					case 11:
						str = '已评价';
						break;
					case 15:
						str = '派单超时';
						break;
					case 16:
						str = '退款中';
						break;
					case 17:
						str = '退款完成';
						break;
				}
				return str
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	scroll-view{
		margin-top: 21rpx;
		max-height: calc(100vh - 96rpx);
	}
	.list{
		margin-bottom: 21rpx;
		background-color: #FFFFFF;
		.title{
			height: 89rpx;
			line-height: 89rpx;
			overflow: hidden;
			color: #999999;
			flex-wrap: nowrap;
			justify-content: space-between;
			border-bottom: 1px solid #f5f5f5;
			.time{
				text{
					font-size: 28rpx;
					margin-right: 21rpx;
					color: #41ba55;
				}
			}
			.status{
				color: #FF2626;
			}
			.t_color{
				color: #B3B3B3;
			}
		}
		.content{
			height: 101rpx;
			padding: 30rpx 0;
			border-bottom: 1px solid #f5f5f5;
			.con_left{
				height: 101rpx;
				.scd,
				.xcd{
					height: 20rpx;
					image{
						height: 14rpx;
					}
				}
				.xcd{
					position: relative;
					bottom: 23rpx;
				}
				.x2x{
					position: relative;
					height: 60rpx;
					image{
						height: 100%;
					}
				}
			}
			.con_right{
				height: 101rpx;
				line-height: 55rpx;
			}
		}
		.tab_cancel{
			height: 90rpx;
			button[type="primary"]{
				padding: 0;
				height: 60rpx;
				line-height: 60rpx;
				margin-top: 15rpx;
				border-radius: 30rpx;
				background-color: #6CBF30;
			}
		}
	}
</style>
